<template>
  <div>
    <el-form :model="addData" label-width="100px" size="small">
      <el-form-item label="模板名称">
        <el-input v-model="addData.name" placeholder="请输入模板名称" style="width: 40%"/>
      </el-form-item>
      <el-form-item label="计费方式">
        <el-radio-group v-model="addData.type">
          <el-radio label="1">计件</el-radio>
          <el-radio label="2">计重</el-radio>
          <el-radio label="3">距离</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="addData.type !== '3'">
        <el-form-item label="配送区域">
          <el-button type="primary" @click="disAddress = true; isEdit = false">添加配送区域</el-button>
        </el-form-item>
        <el-table :data="addData.details.app" style="width:100%" stripe>
          <el-table-column label="配送区域" align="center">
            <template slot-scope="scope">
              <div style="max-width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">{{ scope.row.names }}</div>
            </template>
          </el-table-column>
          <el-table-column label="首件(个)/首重(g)" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.first_num" size="small" placeholder="请输入" style="width:90%"/>
            </template>
          </el-table-column>
          <el-table-column label="运费(元)" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.first_price" size="small" placeholder="请输入" style="width:90%"/>
            </template>
          </el-table-column>
          <el-table-column label="续件(个)/续重(g)" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.expand_num" size="small" placeholder="请输入" style="width:90%"/>
            </template>
          </el-table-column>
          <el-table-column label="运费(元)" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.expand_price" size="small" placeholder="请输入" style="width:90%"/>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.names !== '全国统一运费'">
                <el-button class="action-button" type="text"
                           @click="eidtAddr(scope)"><i class="el-icon-edit"/></el-button>
                <el-button class="action-button"
                           @click="addData.details.app.splice(scope.$index,1)" type="text">
                  <svg-icon icon-class="shanchu"/>
                </el-button>
              </div>
            </template>
          </el-table-column>submit
        </el-table>
      </div>
      <div v-else>
        <el-form-item class="goods-form-item" v-for="(item, index) in distance.start_number" :key="index">
          <div class="group-type">
            <span class="group-type-title">距离</span>
            <el-input v-model="distance.start_number[index]" class="group-type-input" placeholder="请输入" size="small"></el-input>
            <span class="group-type-title">至</span>
            <el-input v-model="distance.end_number[index]" class="group-type-input" placeholder="请输入" size="small"></el-input>
            <span class="group-type-title">km</span>
            <span class="group-type-title">运费</span>
            <el-input v-model="distance.freight[index]" class="group-type-input" placeholder="请输入" size="small"></el-input>
            <el-button type="primary" plain class="goods-form-item-button" v-if="index === 0"
                       @click="add" size="small">添加</el-button>
            <el-button type="danger"  plain class="goods-form-item-button" v-else
                       @click="del(index)" size="small">删除</el-button>
          </div>
          <div style="display:inline-block">
          </div>
        </el-form-item>
      </div>
    </el-form>

    <div style="text-align:center;margin-top:15px">
      <el-button type="primary" size="small" style="padding:8px 30px;" @click="submit">提 交</el-button>
    </div>

    <!-- 配送区域 -->
    <el-dialog :visible.sync="disAddress" width="60%" title="配送区域" :modal="false">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in addressList" :label="city" :key="city" style="width:100px;display:inline-block">{{city}}</el-checkbox>
      </el-checkbox-group>

      <div style="text-align:center;margin-top:15px">
        <el-button type="primary" size="small" style="padding:8px 30px;" @click="submitAddr">确 定</el-button>
      </div>
    </el-dialog>

    
  </div>
</template>

<script>
import { getGoodsAddress, postExpress, putExpress } from '@/api/setting'

export default {
  name: 'express-add',
  props: {
    addData: {
      type: Object,
      required: true
    },
    isAdd: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      disAddress: false,
      addressList: [],

      isIndeterminate: true,
      checkAll: false,
      checkedCities: [],

      isEdit: false,
      addrIndex: 0,
      distance: this.addData.details.app[0].distance ? JSON.parse(this.addData.details.app[0].distance) : {start_number:[''], end_number:[''], freight:['']},
    }
  },
  mounted() {
    this.getGoodsAddress();
  },
  methods: {
    /**
     * 提交
     */
    submit () {
      const params = {
        name: this.addData.name,
        type: this.addData.type,
        key: this.addData.key,
        first_num: [],
        expand_num: [],
        first_price: [],
        expand_price: [],
        names: []
      };
      if (this.addData.type !== '3') {
        this.addData.details.app.forEach(item => {
          params.names.push(item.names);
          params.first_num.push(item.first_num);
          params.expand_num.push(item.expand_num);
          params.first_price.push(item.first_price);
          params.expand_price.push(item.expand_price);
        });
      } else {
        params.distance = this.distance;
      }

      if(this.isAdd) {
        postExpress(params).then(res => {
          if(res.status === 200) {
            this.$message.success('添加成功！');
            this.$emit('success');
          }else{
            this.$message.error(res.message);
          }
        })
      }else{
        params.id = this.addData.id;
        putExpress(params).then(res => {
          if(res.status === 200) {
            this.$message.success('修改成功！');
            this.$emit('success');
          }else{
            this.$message.error(res.message);
          }
        })
      }
      
    },
    /**
     * 获取区域信息
     */
    getGoodsAddress() {
      getGoodsAddress().then(res => {
        if(res.status === 200) {
          this.addressList = [];
          res.data.districts[0].districts.forEach(element => {
            this.addressList.push(element.name);
          });
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 全选切换
     */
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.addressList : []; 
      this.isIndeterminate = false;
    },
    /**
     * 选择
     */
    handleCheckedCitiesChange(val){
      this.checkedCities = val ;
    },
    /**
     * 提交选择区域
     */
    submitAddr() {
      let names = '';
      this.checkedCities.forEach((item,index) => {
        if(index < this.checkedCities.length - 1) {
          names += item + '、';
        }else{
          names += item;
        }
      })
      if(!this.isEdit) {
        this.addData.details.app.push({ names:names, first_num: '', first_price: '', expand_num: '', expand_price: '' });
      }else{
        this.addData.details.app[this.addrIndex].names = names;
      }
      
      this.disAddress = false;
      this.checkedCities = [];
    },
    /**
     * 编辑区域
     */
    eidtAddr(data) {
      this.checkedCities = data.row.names.split('、');
      this.addrIndex = data.$index
      this.isEdit = true;
      this.disAddress = true;
    },
    /**
     * 距离中都添加和删除
     */
    add() {
      this.distance.start_number.push('');
      this.distance.end_number.push('');
      this.distance.freight.push('');
    },
    del(index) {
      this.distance.start_number.splice(index,1);
      this.distance.end_number.splice(index,1);
      this.distance.freight.splice(index,1);
    }
  },
}
</script>
<style>
  .group-type-input {
    width: 10%;
  }
</style>
